<style lang="scss">
  .page-wrap{
    min-height: 100vh;
    background: #fff;
  }
  .hotel{
    &-list{

    }
    &-item{
      width: 710rpx;
      margin: 0 20rpx 20rpx;
      border-radius: 6px;
      overflow: hidden;
      .thumb{
        width: 710rpx;
        height: 355rpx;
      }

      .price-box{
        padding-top: 0 !important;
      }
    }
  }

  .new-ul{
    padding: 20rpx;
    .new-li{
      width: 100%;
      padding: 8px 0;
      justify-content: space-between;
      margin: 0;
      .l{
        flex: 1;
        .title{
          color: #222222;
        }
        .create_at{
          color: #999;
        }
      }
      .r{
        width: 220rpx;
        .thumb{
          width: 200rpx;
          height: 134rpx;
          margin: 0 auto;
          border-radius: 5%;
        }
      }

    }
  }

</style>
<template>

<div class="page-wrap">
  <view class="fun-tab">
<!--    <view class="fun-tab-title">资讯中心</view>-->
    <view class="fun-tab-nav" :class="{sticky:floorstatus}">
      <view
        @click="changeLifeTab(item.id)"
        v-for="(item,idx) in life_data.types"
        :key="idx"
        class="nav-item"
        :class="{active:item.id == life_data.select_type_id}">{{item.title}}</view>
    </view>
  </view>

  <view class="fun-container new-ul bg-white" :class="{sticky:floorstatus}">

    <navigator class="fun-container-item new-li flex fz-14"
               :url="'/pages/info/info?id='+item.id"
               v-for="(item,idx) in life_data.list"
               :key="idx">
      <view class="l">
        <view class="title m-b-8 fz-16">{{item.title}}</view>
        <view class="create_at fz-12">{{item.create_at}}</view>
      </view>
      <view class="r">
        <image class="thumb" :src="item.thumb" mode="scaleToFill"   />
      </view>
    </navigator>

  </view>
</div>

</template>

<script>

import { pageMixin } from '@/mixins'
import { infotype, info } from '@/api'
import { Exception } from '@/common/Exception'
import { error, hideLoading, showLoading } from '@/common/fun'
export default {
  mixins: [pageMixin],
  data () {
    return {
      city_id: '',
      imgUrls: [
        'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
        'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
        'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'
      ],
      indicatorDots: false,
      autoplay: false,
      interval: 5000,
      duration: 1000,
      floorstatus: false,
      life_data: {
        select_type_id: 1,
        types: [],
        page: 1,
        isFinish: false,
        list: [
          // {
          //   title: '测试课程',
          //   logo: 'https://qingclouds-server.oss-cn-shanghai.aliyuncs.com/upload/logo.png',
          //   desc: '描述啊',
          //   type: 'goods',
          //   price: 2323,
          //   id: 2
          // }
        ]

      }
    }
  },
  methods: {
    changeLifeTab (id) {
      if (this.life_data.select_type_id === id) {
        return
      }

      wx.pageScrollTo({
        scrollTop: 0
      })

      this.life_data.page = 1 // 重置
      this.life_data.isFinish = false
      this.life_data.select_type_id = id

      this.loadInfoFunc(id, (res) => {
        this.life_data.list = []
        this.life_data.list = res.data

        // 分页的
        if (parseInt(res.current_page) < res.last_page) {
          this.life_data.page = parseInt(res.current_page) + 1
        } else {
          this.life_data.isFinish = true
        }
      })
    },
    async loadInfoFunc (cate_id, cb) {
      if (this.life_data.isFinish) {
        error('到底啦')
        return
      };

      showLoading('加载中')

      var params = {
        type_id: cate_id,
        paginate: 1,
        page: this.life_data.page
      }
      if (this.city_id) {
        params.city_id = this.city_id
      }

      info(params).then(res => {
        cb && cb(res.data)
        hideLoading()
      }).catch(err => {
        hideLoading()
        Exception.handle(err)
      })
    },

    async _init_func () {
      var params = {}
      if (this.city_id) {
        params.city_id = this.city_id
      }
      var ret = await infotype(params).then(res => res.data).catch(err => Exception.handle(err))

      this.life_data.types = ret
      this.life_data.select_type_id = ret[0].id

      this.loadInfoFunc(ret[0].id, (res) => {
        const list = this.life_data.list.concat(res.data)
        this.life_data.list = list

        // 分页的
        if (parseInt(res.current_page) < res.last_page) {
          this.life_data.page = parseInt(res.current_page) + 1
        } else {
          this.life_data.isFinish = true
        }
      })
    }
  },
  // 加载更多
  onReachBottom () {
    const cate_id = this.life_data.select_type_id

    this.loadInfoFunc(cate_id, (res) => {
      const list = this.life_data.list.concat(res.data)
      this.life_data.list = list

      // 分页的
      if (parseInt(res.current_page) < res.last_page) {
        this.life_data.page = parseInt(res.current_page) + 1
      } else {
        this.life_data.isFinish = true
      }
    })
  },
  // 获取滚动条当前位置
  onPageScroll (e) {
    // console.log(e)
    if (e.scrollTop > 100) {
      this.floorstatus = true
    } else {
      this.floorstatus = false
    }
  },

  onShareAppMessage () {
    // let userInfo = wx.getStorageSync('userInfo'),path = '/pages/map/deatil?id='+this.map.id;
    //
    // //加入分享标识
    // if(userInfo && userInfo.id){
    //   path = path + '&from_mid=' + userInfo.id
    // }
    //
    return {
      title: '旅游资讯'
      // imageUrl: this.map.thumb || wx.state.logo,
      // path: path
    }
  },
  onLoad (options) {
    this.city_id = options.city_id
    this._init_func()
  }
}
</script>

</script>
